<template>
  <div class="shpocart" v-show="visible" @click.self ="changeVisible()">
    <div class="content"  v-if="shopCartList.length">
        <div class="title">
            <span>已选商品</span>
            <span @click.stop="empty()">清空</span>
        </div>

        <div class="list">
            <div class="good" v-for="(item,index) in shopCartList" :key="index">
                <div class="imgbox">
                    <img :src="item.picture" alt="">
                </div>
                <div class="text">
                    <div class="name">{{item.name}}</div>
                    <div class="price">
                        <div>￥{{item.min_price}}</div>
                        <div class="btn">
                            <span @click="sub1(item)">-</span>
                            <span>{{item.count}}</span>
                            <span @click="request_shopcartAdd(item)">+</span>
                        </div>
                    </div>
                </div>
            </div>
            
        </div>

    </div>
    <div v-else class="clean">购物车空空如也，快去买点东西吧！</div>
  </div>
</template>

<script>
import { Toast } from 'vant'
import {  mapActions, mapMutations, mapState } from 'vuex'
import { clear_shopcart, shopcart_sub } from '../utils/api'
export default {
    data(){
        return{
            visible:false,
            // list:[
            //     {
            //         imgUrl:'http://p0.meituan.net/dealwatera/3845b4f91f4f702f2a382c1b3c044361107347.jpg',
            //         name:'安旗蛋糕',
            //         pirce:29.9,
            //     },
            //     {
            //         imgUrl:'http://p0.meituan.net/dealwatera/06bf88cdba669e66fa20b175ce46b21497152.jpg',
            //         name:'鸡公爱上虾',
            //         pirce:88,
            //     },
            //     {
            //         imgUrl:'http://p0.meituan.net/deal/bc417b0c95734d2dd95774c0f334c4461457651.jpg',
            //         name:'卤校长老火锅',
            //         pirce:69,
            //     },
            // ]
        }
    },
    computed:{
        // 购物车列表
        ...mapState(['shopCartList'])
    },
    methods: {
        // 清空购物车的同步方法
        // ...mapMutations(['clear_cart']),
        ...mapActions(['request_shopcartAdd']),
        // 购物车的显示隐藏
        changeVisible(){
            this.visible = !this.visible
        },
        // 清空购物车
        empty(){
            var userid = JSON.parse(localStorage.getItem('userinfo')).id
            clear_shopcart({userid}).then((res)=>{
                console.log(res);
                if(res.data.code == 200){
                // Toast.fail(res.data.msg)
                this.$store.commit('clear_cart')
                }
            })
        },
        // 购物车减一 
        sub1(item){
           var userid = JSON.parse(localStorage.getItem('userinfo')).id
            shopcart_sub({userid,goodid:item.id}).then((res)=>{
                 console.log(res);
                    if(res.data.code == 200){
                    this.$store.commit('cart_sub',item)
                }
            }).catch((e)=>{})
        }
    },
}
</script>

<style lang='scss' scoped>
    .shpocart{
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.3);
        position: fixed;
        top:0;
        .content{
            position: absolute;
            left: 0;
            bottom: 1.6rem;
            width: 100%;
            padding: .2667rem;
            box-sizing: border-box;
            background-color: white;
            .title{
                display: flex;
                justify-content: space-between;
                span:first-child{
                    font-size: .48rem;
                }
                span:last-child{
                    font-size: .4267rem;
                }
            }
            .list{
                .good{
                    display: flex;
                    margin: .2667rem 0;
                    .imgbox{
                        width: 2.1333rem;
                        height: 2.1333rem;
                        margin-right: .2667rem;
                        img{
                            width: 100%;
                            height: 100%;
                        }
                    }
                    .text{
                        flex: 1;
                        display: flex;
                        flex-direction:column;
                        justify-content: space-between;
                        .name{
                            font-size: .48rem;
                        }
                        .price{
                            display: flex;
                            justify-content: space-between;
                            div:first-child{
                                color: red;
                                font-size: .48rem;
                            }
                            .btn{
                                span{
                                    display: inline-block;
                                    width: .4267rem;
                                    height: .4267rem;
                                    border-radius: 50%;
                                    color: white;
                                    background-color: lightskyblue;
                                    line-height: .4267rem;
                                    text-align: center;
                                }
                                span:nth-child(2){
                                    color: black;
                                    border-radius: 0 ;
                                    padding: 0 .08rem;
                                    font-size: .4267rem;
                                    background-color: white;

                                }
                            }
                            

                        }
                    }
                }


            }

        }
        .clean{
            width: 100%;
            height: 8rem;
            text-align: center;
            line-height: 8rem;
            font-size: .5333rem;
            background-color: white;
            position: fixed;
            bottom: 1.6rem;
        }
    }

</style>